<template>
    <!-- 返回键 -->
    <div class="back">
        <van-nav-bar title="充值记录" left-text="返回" left-arrow @click-left="back" />
    </div>

    <!-- 选择时间 -->
    <div class="times">
        <van-cell is-link arrow-direction="down" @click="show=!show" v-if="this.year=='' ">请选择时间</van-cell>
        <van-cell is-link arrow-direction="down" @click="show=!show" v-if="this.year!=''">{{this.year}}年{{this.month}}
        </van-cell>

        <div class="box">
            <p style="padding-left: 1rem;">时间</p>
            <p>金额(元)</p>
            <p style="padding-right: 1rem;">状态</p>
        </div>

        <!-- 记录内容 -->   
        <van-checkbox-group v-model="checked">
            <div class="history" v-for="(item,key) in paylist" v-if="paylist!=null">
                <!-- 复选框 -->
                <van-checkbox :name="item.id" class="item"></van-checkbox>
                <!-- 单元格滑块 -->
                <van-swipe-cell>
                    <div class="left">
                        <p style="font-size: .8rem;">{{item.createtime}}</p>
                    </div>
                    <div class="center">
                        <span>￥{{item.user.point}}元</span>
                    </div>
                    <div class="status" v-if="item.status==0">审核中</div>
                    <div class="status" v-if="item.status==1">充值成功</div>
                    <div class="status" v-if="item.status==2">充值失败</div>

                    <!-- 插槽 -->
                    <template #right>
                        <van-button square text="删除" type="danger" class="delete-button" @click="remode(item.id)" />
                    </template>

                </van-swipe-cell>
            </div>
        </van-checkbox-group>
        <!-- 时间插件 -->
        <van-popup v-model:show="show" position="bottom">
            <van-datetime-picker title="选择年月" v-model="currentDate" :min-date="minDate" :max-date="maxDate"
                type="year-month" :formatter="formatter" @confirm="confirm" @cancel="cancel" />
        </van-popup>
    </div>
    <!-- 多选删除 -->
    <van-submit-bar class="remove" button-text="删除记录" @submit="onSubmit">
        <van-checkbox v-model="all" @click="delAll">全选</van-checkbox>
    </van-submit-bar>
</template>

<script>
    export default {
        name: 'BaseCard',
        created() {

            this.card()
        },
        data() {
            return {
                userid: '',
                paylist: [],
                LoginUser: this.$cookies.get('LoginUser'),
                show: false,

                minDate: new Date(2019, 12, 31),
                maxDate: new Date(2035, 12, 31),
                currentDate: new Date(), //结束时间
                enditime: "", //结束时间戳
                year: '',
                month: '',
                createtime: '',
                newTime: '',
                checked: [], //选中的值
                all: false, //全选
            }
        },
     
        methods: {
            back() {
                this.$router.go(-1)
            },
            // 请求数据
            async card() {
                var data = {
                    userid: this.LoginUser.id,
                }
                // 请求接口
                var result = await this.$api.card(data)
                // console.log(result);
                this.paylist = result.data
                this.show = false
                // console.log(this.paylist);

            },

            // 获取时间
            async confirm() {
  
                var year = this.currentDate.getFullYear() //年
                var month = Number(this.currentDate.getMonth() + 1) //月
                var oldTime = (new Date(`${year}/${month}/01 00:00:00`)).getTime() / 1000
                var newTime = (new Date(`${year}/${month+1}/01 00:23:59`)).getTime() / 1000

                // console.log(oldTime,newTime);
                // return false;
                var data = {
                    userid: this.LoginUser.id,
                    createtime: oldTime,
                    newTime: newTime
                }
                //   console.log(data);
                //   return false
                var result = await this.$api.card(data)
                this.year = year
                this.month = month
                this.paylist = result.data
                this.show = false

            },
            cancel() {
                this.show = false
            },

            // 单条删除
            async remode(payid) {
                // console.log(payid);传了个id
                // 提醒
                this.$dialog.confirm({
                    'title': '删除充值记录',
                    'message': "是否确认删除",
                }).then(async () => {
                    // 调接口 组装数据
                    var data = {
                        userid: this.LoginUser.id,
                        payid
                    }
                    // console.log(data);
                    var result = await this.$api.remove(data)
                    if (result.code == 0) {
                        this.$notify({
                            message: result.msg,
                            dueration: 1000,
                        })
                        return false
                    }

                    // 重新加载页面
                    this.card();

                }).catch(() => {})

            },

            // 多条删除
            delAll() {
                if (this.all) {
                    var ids = []
                    this.paylist.map((value) => {
                        ids.push(value.id)
                    })
                    // 覆盖原本的数组
                    this.checked = ids
                    console.log(this.checked);

                } else {
                    this.checked = []
                }
            },
            // 提交删除
            async onSubmit(ids) {

                this.$dialog.confirm({
                    'title': '删除充值记录',
                    'message': "是否确认删除",
                }).then(async () => {

                    // 前台提交数据到后台，先提交全部，在拿取
                    var data = {
                        paylist: this.paylist,
                        ids: this.checked

                    }

                    var result = await this.$api.delAll(data)

                    if (result.code == 0) {
                        this.$cotify({
                            message: result.msg,
                            dueration: 1000,
                        })
                        return false
                    }
                    this.card();

                }).catch(() => {})

            },

        },
    }
</script>


<style>
    body {
        background-color: #fff;
    }

    .box {
        width: 100%;
        display: flex;
        font-size: 1rem;
        padding: .5rem 0;
        background-color: rgb(253, 253, 245);
        justify-content: space-between;
    }

    .history {
        width: 100%;
        display: flex;
        position: relative;
        justify-content: space-between;
    }

    .history .left {
        width: 20%;
        display: inline-block;
        padding: .5rem 0;
        text-align: center;
    }

    .history .center {
        width: 60%;
        font-size: .8rem;
        display: inline-block;

        text-align: center;
    }

    .history .status {
        width: 20%;
        font-size: .8rem;
        text-align: center;
        display: inline-block;

    }

    .history .left span {
        display: inline-block;
        font-size: 1rem;
    }

    .item {
        position: absolute;
        z-index: 100;
        top: 1.5rem;
        left: 5%;

    }
    .van-submit-bar__bar{   
        display:flex;
        justify-content: space-between !important;
    }
</style>